<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>parking status check</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="./css/mui.min.css">
		
		<style type="text/css">
			#popover {
				width: 80%;
				height: 50%;
				position: fixed; 
				top: 10%; 
				left: 10%;
				padding-left: 1%;
			}
			/*移除底部或顶部三角,需要在删除此代码*/
			.mui-popover .mui-popover-arrow:after {
			 	width: 0px; 
			 }
			 .aaa{
			 	margin-left: 1%;
			 	margin-right:1%;
			 	word-break:break-all;
			 }
			 #bottom{
			 	width: 100%;
			 	position:absolute;
			 	bottom:0;
			 }

		</style>
		
	</head>

	<body>
		<!--页面主结构开始-->
		<div id="app" class="mui-views">
			<div class="mui-view">
				<div class="mui-navbar">
				</div>
				<div class="mui-pages">
				</div>
			</div>
		</div>
		<!--页面主结构结束-->
		<!--单页面开始-->
		<div id="setting" class="mui-page">
			<!--页面标题栏开始-->
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<h1 class="mui-center mui-title">车场状态监测</h1>
			</div>
			<!--页面标题栏结束-->
			<!--页面主内容区开始-->
			<div class="mui-page-content">


				<div id="popover" class="mui-popover">
					<div class="mui-popover-arrow"></div>
					<center><div style="color:#0099FF">最新一次错误日志</div></center>
					<p class="aaa" id="name"></p>
					<p class="aaa"  id="lastTime"></p>
					<p class="aaa"  id="log"></p>
					<center id="bottom"><div><p>点击灰色区域退出</p></div></center>
				</div>


				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view">	
						 <li class="mui-table-view-cell">Item 1 
					        <span class="mui-badge mui-badge-primary"></span>
					    </li>
							<?php
								include "sql.php";
								$parking = getParkingStat();
								foreach ($parking as $key => $value) {
									$a = "<li onclick=\"getErrorMsg('$value[0]')\" class='mui-table-view-cell'>车场:$value[0]<br>时间:$value[1]<br>更新:$value[2]s前";
									$b1 = "<span class='mui-badge mui-badge-success'>正常</span>";
									$b2 = "<span class='mui-badge'>离线</span>";
									$c = "</li>";
									$b = "";
									if($value[2]<610) $b = $b1;
									else $b = $b2;
									echo $a.$b.$c;
								}
							?>
						</ul>
					</div>
				</div>
			</div>
			<!--页面主内容区结束-->
		</div>
		

		
	</body>
	<script src="./js/mui.min.js "></script>

	<script type="text/javascript">
		mui.init();
		function getErrorMsg(parkingName){

			window.location.href="getPassData.php?start=0&parkingName="+parkingName;
			return;
			//alert(parkingName);
			mui.ajax({
					url:"getDetailMsg.php",
					data:{
						"parkingName":parkingName,
						"start":0,
						"end":3
					},
					async: true,
					type:'post',
					dataType:'text',
					timeout:10000,
					success:function(data){													
						if(data.length>5){
							w = data.split("\u0005");
							error = JSON.parse(w[0]);
							document.getElementById("name").innerHTML = "车场名称 : "+data[0].parking_name;
							document.getElementById("lastTime").innerHTML = "更新时间 : "+data[0].create_time;
							document.getElementById("log").innerHTML = "错误日志 : "+data[0].error_des;
							mui("#popover").popover('toggle', document.getElementById("div"));
						}
						else{
							mui.alert("没有相关错误日志信息，建议前往现场查看情况");
						}
					},
					error:function(xhr,type,errorThrown){						
						mui.alert("暂无相关信息:"+type);
					}
			});
		}
	</script>
	
</html>
